<template>
	<view class="content">
		<!-- 系统导航栏的留白 -->
		<view class="f0" :style="{width:'100%', height: statusBarHeight + 'px',backgroundColor: '#009900'}"></view>
		<!-- 导航栏 -->
		<zh-nav-bar title="智慧社区">
			<text slot="icon-right">
				<uni-icons size="26" color="#fff" type="search" @click="search"></uni-icons>
			</text>
		</zh-nav-bar>
		<!-- 轮播广告 -->
		<!-- indicator-dots：指示器小圆点是否显示 -->
		<!-- indicator-color：指示器小圆点颜色 -->
		<!-- indicator-active-color：指示器小圆点激活时颜色 -->
		<!-- autoplay:是否自动轮播 -->
		<!-- interval:间隔，一个广告的停留时间 -->
		<!-- duration：滑动的时间，动画持续时间 -->
		<swiper indicator-color="#f2f2f2" indicator-active-color="#009900" :indicator-dots="true" :autoplay="true"
			:interval="2000" :duration="1000">
			<swiper-item v-for="(i,idx) in carousels" :key="i.cid">
				<view class="swiper-item">
					<image :src="BaseURL + i.pic" mode="widthFix" @click="jumpTo(i.href,i.cid)"></image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 八宫格功能菜单 -->
		<uni-grid class="menu-grid" :column="4" :showBorder="false" :square="false">
			<uni-grid-item v-for="i in menuItems" :key="i.iid">
				<view class="menu-item" @click="jump(i.href)">
					<image :src="BaseURL + i.pic" mode="widthFix" />
					<text>{{i.title}}</text>
				</view>
			</uni-grid-item>
		</uni-grid>

		<!-- 商业服务 -->
		<zh-card title="商业服务">
			<view class="service-body">
				<!-- 左侧：房屋租售 -->
				<view class="service-item fwzs">
					<!-- 左侧：两行文字 -->
					<view class="txt">
						<text class="title">房屋租售</text>
						<view>
							<navigator url="">租房</navigator>
							<navigator url="">转租</navigator>
						</view>
					</view>
					<!-- 右侧：图片 -->
					<!-- 一张图片，不保持宽高比，使用指定的尺寸 -->
					<image class="pic" src="../../static/img/chuzu.png" mode="scaleToFill"></image>
				</view>
				<!-- 右侧：便民服务 -->
				<view class="service-item bmfw">
					<view class="txt">
						<text class="title">便民服务</text>
						<view>
							<navigator url="../bmfw/bmfw">便利店</navigator>
							<navigator url="../bmfw/bmfw">超市</navigator>
						</view>
					</view>
					<navigator url="../bmfw/bmfw">
						<image class="pic" src="../../static/img/bianmin.png" mode="scaleToFill"></image>
					</navigator>
				</view>
			</view>
		</zh-card>
		<!-- 社区活动 -->
		<zh-card title="社区活动">
			<view class="activity-body">
				<view class="activity-item" v-for="i in activities" :key="i.aid">
					<!-- 左侧：活动介绍文字 -->
					<view class="txt">
						<text class="title">{{i.title}}</text>
						<text class="content">
							{{i.content}}
						</text>
						<text class="start-time">
							{{i.startTime | datetime}}
						</text>
					</view>
					<!-- 右侧：相关活动图片 -->
					<image :src="BaseURL + i.pic" mode="scaleToFill"></image>
				</view>
			</view>
		</zh-card>
	</view>
</template>

<script>
	import {
		indexData,
		BaseURL
	} from '../../service'
	export default {
		data() {
			return {
				BaseURL,
				carousels: [], //轮播广告数据
				menuItems: [], //应用菜单里的条目数据
				activities: [], //社区活动数据
				indicatorDots: true,
				statusBarHeight: 0,
			}
		},
		// 生命周期挂载完成：类似组件里的方法mounted
		// 
		async onLoad() {
			// 获取系统顶部高度
			let info = uni.getSystemInfoSync()
			this.statusBarHeight = info.statusBarHeight
			// 弹出土司框，欢迎回来
			uni.showToast({
				title: '欢迎回来',
				duration: 1000,
				icon: 'loading'
			})
			// 异步请求数据
			let data = await indexData()
			// console.log(data);
			this.carousels = data.carousels
			this.menuItems = data.menuItems
			this.activities = data.activities
		},
		methods: {
			jump(href) {
				// console.log(href);
				uni.navigateTo({
					url: href
				});
			},
			jumpTo(href, id) {
				// console.log(id);
				uni.navigateTo({
					url: `${href} + ?cid=${id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	swiper-item {
		image {
			width: 100%;
		}
	}

	.menu-grid {
		background-color: #fff;
		margin-top: $uni-spacing-col-lg;

		.menu-item {
			flex-direction: column;
			padding: $uni-spacing-col-lg 0;
			align-items: center;

			image {
				width: 30%;
			}
		}
	}

	.service-body {
		width: 100%;

		.service-item {
			flex: 1;
			justify-content: space-between;
			align-items: center;
			border: 1px solid $uni-border-color;
			padding: 20rpx 0;

			&.fwzs {
				padding-right: $uni-spacing-row-lg/2;
				border-right: 0;
			}

			&.bmfw {
				padding-left: $uni-spacing-row-lg/2;
			}

			.txt {
				flex-direction: column;
				justify-content: space-around;
				height: 120rpx;
				flex: 1;
				padding-right: 16rpx;

				.title {
					font-weight: 600;
				}

				>view {
					justify-content: space-between;

					navigator {
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
				}
			}

			.pic {
				width: 200rpx;
				height: 120rpx;
			}
		}
	}

	.activity-body {
		flex-direction: column;
		width: 100%;
		justify-content: space-between;

		.activity-item {
			margin: $uni-spacing-col-base 0;

			.txt {
				flex-direction: column;
				flex: 1;
				width: calc(100% - 268rpx - 30rpx);
				padding-right: 30rpx;

				.title {
					font-weight: 600;
					width: 100%;
					@include ellipse-1;
				}

				.content {
					width: 100%;
					@include ellipse-1;
				}

				.start-time {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-grey;
					margin-top: $uni-spacing-col-lg;
				}
			}

			image {
				width: 268rpx;
				height: 148rpx;
			}
		}
	}
</style>
